<template>
    <div class="home-wrapper">
        <project-menu :detail="projectDetail" :pid="projectId"></project-menu>
        <div class="filters-wrapper">
            <div class="title total_title">实施</div>
            <el-row type="flex">
                <el-input placeholder="请输入账户名称" size="small" v-model="implement_search" class="input-with-select"
                    style="width: 300px;">
                    <el-button @click="loadImplementList({})" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-row>
            <el-table :data="implementdata" border
                :header-cell-style="{'text-align':'center','background':'#f7f7f7','color':'#666'}"
                style="width: 100%;margin-top: 10px" v-loading="loading">
                <el-table-column prop="account" label="账户名称" align="center">
                    <template slot-scope="scope">
                            <router-link style="color: #409EFF;" :to="{path: '/grouplist/' + projectId + '/' + scope.row.id + '/' + scope.row.code}">
                                {{scope.row.account}}</router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="project_user" width="100px" label="优化师" align="center">
                </el-table-column>
                <el-table-column prop="direction" label="方向" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.direction_show != true">
                            {{scope.row.direction}}
                            <el-button v-if="scope.row.is_update == 1 && projectDetail.status == 1" type="text" @click="modifyDirection(scope.$index, scope.row)" style="margin-left: 5px;" size="mini"
                                icon="el-icon-edit">
                            </el-button>
                        </div>
                        <div v-if="scope.row.direction_show == true">
                            <el-input size="small" v-model="scope.row.remarks" style="width: 200px;">
                            </el-input>
                            <el-button type="text" @click="presDirection(scope.$index, scope.row)" style="margin-left: 5px;" size="mini"
                                icon="el-icon-circle-check">
                            </el-button>
                            <el-button type="text" @click="closeDirection(scope.$index, scope.row)" style="margin-left: 5px;" size="mini"
                                icon="el-icon-circle-close">
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="impstate" width="100px" label="状态" align="center">
                </el-table-column>
                <el-table-column prop="imptime" width="150px" label="更新时间" align="center">
                </el-table-column>
                <el-table-column prop="operation" width="100px" label="操作" align="center">
                    <template slot-scope="scope">
                        <router-link :to="{path:'/newgroup/' + projectId + '/' + scope.row.id + '/' + scope.row.code + '/0'}">
                            <el-button v-if="scope.row.is_update == 1 && projectDetail.status == 1" size="mini" @click="(scope.row)">新建</el-button>
                        </router-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="end" style="margin-top: 20px;">
                <el-pagination background layout="prev, pager, next" :current-page="curPage" :total="total" :page-size="pageSize"
                    @current-change="handleCurrentChange($event)">
                </el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {
        pageParams
    } from '@/settings'
    export default {
        data() {
            return {
                projectId: 0,
                projectDetail: {},
                pageSize: pageParams.pageSize,
                curPage: 1,
                total: 0,
                loading: false,
                implementdata: [],
                edit_direction: '',
                implement_search: ''
            }
        },
        created() {
            this.projectId = this.$router.currentRoute.params.id
        },
        mounted() {
            // this.projectId = this.$router.currentRoute.params.id
            // this.loadData()
            this.loadData()
        },
        methods: {
            loadData() {
                this.$axios.get('/project/detail', {
                        projectid: this.projectId
                    })
                    .then(e => {
                        this.projectDetail = e.data
                    })
                this.loadImplementList({})
            },
            loadImplementList(param) {
                this.loading = true
                param['number'] = this.pageSize
                param['projectid'] = this.projectId
                param['keyword'] = this.implement_search
                if (!param['page']) {
                    param['page'] = 1
                }
                this.curPage = param['page']
                this.$axios.get('/implement/list', param)
                    .then(e => {
                        this.loading = false
                        this.implementdata = e.data.items
                        console.log('this.implementdata', this.implementdata)
                        this.total = e.data.total
                    }).catch(() => {
                        this.loading = false
                    })
            },
            handleCurrentChange(val) {
                this.loadImplementList({
                    page: val
                })
            },
            modifyDirection(index,row) {
                console.log(index, row)
                this.$set(this.implementdata[index], 'remarks', this.implementdata[index].direction)
                this.$set(this.implementdata[index], 'direction_show', true)
            },
            closeDirection(index,row) {
                console.log(index, row)
                this.$set(this.implementdata[index], 'direction_show', false)
            },
           presDirection(index,row) {
                let param = {id: row.id, direct: this.implementdata[index].remarks}
                console.log(param, index, row)
                this.$axios.post('/direct/rename', param).then((e) => {
                    this.implementdata[index].direction = this.implementdata[index].remarks
                    this.$set(this.implementdata[index], 'direction_show', false)
                    this.$message({
                        type: 'success',
                        message: e.msg ? e.msg : '修改成功!'
                    })
                })
            }
        }
    }
</script>
